<template>
  <header class="header can-sticky">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="inner">
            <!-- Logo -->
            <div class="logo">
              <NuxtLink to="/" class="d-flex h-100">
                <img src="~/assets/images/logo-3.png" alt="logo" class="image-fit-contain" />
              </NuxtLink>
            </div>
            <!-- Logo -->
            <!-- Nav -->
            <TheNavigation :class="['navigation', { open: isMenuOpen }]" />
            <!-- Nav -->
            <MobileNav v-model="isMenuOpen" />
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Header End -->
  <!-- Subheader Start -->
  <div v-if="achievementInfo && achievementInfo.data[0]" class="section-bg section-padding subheader md:py-40!" :style="{ backgroundImage: `url(${subheader})` }">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <h2 class="text-white page-title">{{ achievementInfo.data[0].title }}</h2>
        </div>
      </div>
    </div>
  </div>
  <!-- Subheader End -->
  <!-- Service Details Start -->
  <section v-if="achievementInfo && achievementInfo.data[0]" class="section-padding">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="post_details service_details">
            <div class="post_image">
              <div class="d-flex h-100">
                <img :src="achievementInfo.data[0].image_url" :alt="achievementInfo.data[0].title" class="mx-auto w-[60vw] image-fit md:object-cover object-contain h-auto max-h-screen" />
              </div>
            </div>
            <h2 class="post_title">
              <div>{{ achievementInfo.data[0].title }}</div>
            </h2>
            <div class="text-16px">
              <div v-html="achievementInfo.data[0].content"></div>
            </div>
            <hr />
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Service Details End -->
  <!-- Footer Start -->
  <TheFooter />

  <!-- Footer End -->
  <!-- Copyright Start -->
  <div class="thm-bg-color-one copyright">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <p class="mb-0">
            Copyright © <span id="year"></span>.
            <a target="_blank" href="#" title=" 科技创新院" class="text-white">科创研究院</a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- Copyright End -->
  <div data-target="html" class="back-to-top ft-sticky" style="">
    <i class="fal fa-long-arrow-up"></i>
  </div>
</template>

<script setup lang="ts">
import subheader from "../assets/images/subheader.jpg";
import TheNavigation from "~/component/TheNavigation.vue";
import TheFooter from "~/component/TheFooter.vue";
import MobileNav from "~/component/MobileNav.vue";

const { public: pub } = useRuntimeConfig();
const route = useRoute();

const isMenuOpen = ref(false);

// 获取成果信息
// const achievementInfo = ref<any>({});

const id = computed(() => String(route.params.id));

// 获取成果信息
const config = useRuntimeConfig();

const {
  data: achievementInfo,
  pending,
  error,
} = await useAsyncData(
  () => `news:${route.params.id}`,
  () => $fetch(`${config.public.baseURLSSR}/api/news_get_one?id=${id.value}`),
  { watch: [() => route.params.id] }
);

useSeoMeta({
  title: achievementInfo.value.data[0].title,
  description: achievementInfo.value.data[0].content?.slice(0, 150) || "资讯正文",
  ogTitle: achievementInfo.value.data[0].title,
  ogDescription: achievementInfo.value.data[0].content,
  ogImage: achievementInfo.value.data[0].image_url || pub.defaultOG,
  ogType: "article",
  ogUrl: pub.siteUrl + route.fullPath,
});

useHead({
  script: [
    {
      type: "application/ld+json",
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "NewsArticle",
        headline: achievementInfo.value.data[0].title,
        image: [achievementInfo.value.data[0].image_url || `${pub.siteUrl}/logo.png`],
        datePublished: achievementInfo.value.data[0].create_at || new Date().toISOString(),
        author: { "@type": "Organization", name: "西班牙科技创新院" },
        publisher: {
          "@type": "Organization",
          name: "西班牙科技创新院",
          logo: { "@type": "ImageObject", url: `${pub.siteUrl}/logo.png` },
        },
      }),
    },
    {
      type: "application/ld+json",
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        itemListElement: [
          { "@type": "ListItem", position: 1, name: "首页", item: pub.siteUrl },
          { "@type": "ListItem", position: 2, name: "信息公开", item: pub.siteUrl + "/academy-news" },
          { "@type": "ListItem", position: 3, name: achievementInfo.value.data[0].title, item: pub.siteUrl + route.fullPath },
        ],
      }),
    },
  ],
});
</script>

<style></style>
